<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<title>vue prop 单项数据流</title>
</head>
<body>
	<div id="app1">
		<blog-post initial-counter='123' size="BCDS"></blog-post>
		<!--v-bind 使用-->
		<blog-post v-bind:initial-counter=123 size="BCDS"></blog-post>
		
	</div>
</body>
</html>
<script type="text/javascript">
	
	Vue.component('blog-post',{
	  // 在 JavaScript 中是 camelCase 的
	  	// props: ['initialCounter','size'],
	  	 props:  {
	  	 	initialCounter:String,
	  	 	size:String,
	  	 },
		data: function () {
			return {
				counter: this.initialCounter+1
			}
		},
		computed: {
		  normalizedSize: function () {
		    return this.size.trim().toLowerCase()
		 }
		},
	  	template: '<h3>{{ initialCounter }}--{{counter}}--{{normalizedSize}}--{{size}}</h3>'
	});

	var app4=new Vue({
		el:'#app1'
	})
</script>